<!--
 * @Author: your name
 * @Date: 2021-11-19 21:19:33
 * @LastEditTime: 2021-11-22 15:30:10
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\xmxz\index.vue
-->
<template>
  <div
    class="right"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.6)"
  > 
    <div class="radio">
      <el-radio v-model="radio" label="1">分析统计</el-radio>
    <el-radio v-model="radio" label="2">详情表</el-radio>
    </div>
    <div class="dataFrom">以下数据最新更新日期为：2021年10月</div>
    <div class="labelOne" v-show="radio == '1'">
      <analysis v-if="AreaData"></analysis>

      <landChangeYjjbnt v-if="YjjbntData"></landChangeYjjbnt>

      <landChangeWdlygd v-if="WdlygdData"></landChangeWdlygd>

      <landChangeWaterhead v-if="yjsyData"></landChangeWaterhead>
      
      <landChangeTdlybgdc v-if="TDresulrData"></landChangeTdlybgdc>
      <landChangeWoodland
        :data="ResultData"
        v-if="ResultData"
      ></landChangeWoodland>
      <landChangeRiver v-if="hdsqData"></landChangeRiver>
      <landChangeTdscqk v-if="tdscData"></landChangeTdscqk>
      <landChangeTdcrqk v-if="tdcrData"></landChangeTdcrqk>
      <landChangeBuilding v-if="jzData"></landChangeBuilding>
      <landChangeVillage v-if="cunluoData"></landChangeVillage>
      <landChangeGtkjgh v-if="gtkjghData"></landChangeGtkjgh>
      <landChangeTdlyztgh v-if="tdlyztghAData && tdlyztghBData"></landChangeTdlyztgh>
    </div>

    <div class="labelTwo" v-show="radio == '2'">
      
      <tuDi v-if="TDresulrData" class="tudi"></tuDi>
      <linDi v-if="ResultData"></linDi>
      <heDao v-if="hdsqData"></heDao>
      
      <tudishouchu v-if="tdscData"></tudishouchu>
      <cunLuo v-if="cunluoData"></cunLuo>
      <guotukongjian v-if="gtkjghData"></guotukongjian>
      <tudiliyongA v-if="tdlyztghAData"></tudiliyongA>
      <tudiliyongB v-if="tdlyztghBData"></tudiliyongB>
    </div>
  </div>
</template>

<script>
import analysis from "./children/analysis.vue";
import landChangeWoodland from "./children/land_change_woodland.vue";
import landChangeTdlybgdc from "./children/land_change_tdlybgdc.vue";
import landChangeYjjbnt from "./children/land_change_yjjbnt.vue";
import landChangeWdlygd from "./children/land_change_wdlygd.vue";
import landChangeWaterhead from "./children/land_change_waterhead.vue";
import landChangeTdcrqk from "./children/land_change_tdcrqk.vue";
import landChangeBuilding from "./children/land_change_building.vue";
import landChangeVillage from "./children/land_change_village.vue";
import landChangeTdscqk from "./children/land_change_tdscqk.vue";
import landChangeRiver from "./children/land_change_river.vue"
import landChangeTdlyztgh from "./children/land_change_tdlyztgh.vue"
import landChangeGtkjgh from "./children/land_change_gtkjgh.vue"

import tuDi from "./children_two/tudi.vue";
import linDi from "./children_two/lindi.vue";
import heDao from "./children_two/hedao.vue"
import cunLuo from "./children_two/cunluo.vue";
import tudishouchu from "./children_two/tudishouchu.vue";
import guotukongjian from "./children_two/guotukongjian.vue";
import tudiliyongA from "./children_two/tudiliyongA.vue"
import tudiliyongB from "./children_two/tudiliyongB.vue"
import { mapState } from "vuex";
export default {
  data() {
    return {
      radio: "1",
      // rightLoading: false,
    };
  },
  computed: {
    ...mapState("Sjsx", [
      "ResultData",
      // "unit",
      "AreaData",
      "TDresulrData",
      "YjjbntData",
      "WdlygdData",
      "yjsyData",
      "tdcrData",
      "jzData",
      "cunluoData",
      "tdscData",
      "hdsqData",
      "gtkjghData",
      "resultCode",
      "loading",
      "tdlyztghAData",
      "tdlyztghBData",
    ]),
  },
  watch: {},
  methods: {
    // // 判断loading为ture还是false
    // getResultCode() {
    //   console.log(this.loading, "loading的值");
    //   this.rightLoading = this.loading;
    //   // if(this.resultCode == 200){
    //   //   this.rightLoading = true
    //   // }
    // },
  },
  created() {},
  mounted() {
    // this.getResultCode();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {
    // this.getResultCode();
  },
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {
    analysis,
    landChangeWoodland,
    landChangeTdlybgdc,
    landChangeYjjbnt,
    landChangeWdlygd,
    landChangeWaterhead,
    landChangeTdcrqk,
    landChangeBuilding,
    landChangeVillage,
    landChangeTdscqk,
    landChangeRiver,
    landChangeTdlyztgh,
    landChangeGtkjgh,

    tuDi,
    linDi,
    heDao,
    cunLuo,
    tudishouchu,
    guotukongjian,
    tudiliyongA,
    tudiliyongB
  },
};
</script>

<style lang="scss" scoped>
.right {
  width: 23.5%;
  height: calc(100% - 120px);
  position: absolute;
  right: 0px;
  top: 95px;
  border-radius: 4px;

  // background: linear-gradient(
  //   -90deg,
  //   rgba(37, 52, 80, 0.8) 0%,
  //   rgba(5, 49, 126, 0) 100%
  // );
  background: linear-gradient(
    -90deg,
    rgba(12, 19, 36, 0.8) 0%,
    rgba(1, 28, 73, 0.5) 100%
  );
  // background: rgb(49, 180, 174);
  // border: 1px solid #fff;
  // background: linear-gradient(
  //   -90deg,
  //   rgba(37, 52, 80, 0.8) 0%,
  //   rgba(5, 49, 126, 0) 100%
  // );
  padding: 5px 5px;
  .dataFrom{
    padding-top: 15px;
    padding-bottom: 5px;
    font-size: 18px;
    color: #fff;
  }
  .labelOne,
  .labelTwo {
    margin-top: 12px;
    // height: 730px;
    height: calc(100% - 90px);
    width: 505px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 60px;
    // padding-left: 10px;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      // background: -webkit-gradient(
      //             linear,
      //             left top,
      //             left bottom,
      //             from(#83a6a6),
      //             to(#483d8b)        
      // );
      // background: linear-gradient(180deg, #83a6a6, #483d8b, #83a6a6);
      background: linear-gradient(
        180deg,
        rgba(131, 166, 166, 0.1),
        rgba(131, 166, 166, 0.8),
        rgba(131, 166, 166, 0.1)
      );
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }
  }
}
</style>
<style lang="scss" scoped>
.radio{
  display: flex;
.el-radio {
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  margin-right: 30px;
  display: flex;
}
.el-radio__label {
  font-size: 18px;
}
}
</style>
